<!--
 * @Author: [wcy]
 * @Date: 2021-12-28 10:44:56
 * @LastEditors: [wcy]
 * @LastEditTime: 2021-12-31 11:24:32
 * @Description: 
-->
<template>
  <div>
    <!-- 全局的三级菜单 -->
    <typeNav />
    <ListContainer />
    <Recommend />
    <Rank :searchList="searchList1" />
     <div class="like">
    <div class="py-container">
      <div class="title">
        <h3 class="fl">猜你喜欢</h3>
        <a href="javascript:;" class="fr tip changeBnt" @click="check()">换一换</a>
      </div>
      <div class="bd">
        <ul class="favourate">
          <li v-for="(item, index) in searchList.slice(0, 6)" :key="index" @click="goPay(item)">
            <img :src="item.defaultImg" alt="" />
            <div class="like-text">
              <p>{{ item.title }}</p>
              <h3>¥{{ item.price }}.00</h3>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
    <!-- Floor这个组件：自己在组件内部是没有发请求的，数据是父组件给的 -->
    <!-- <Floor v-for="(floor,index) in floorList" :key="floor.id" :list="floor"/> -->
    <Brand />
  </div>
</template>

<script>
//非路由组件在使用的时候分为三大步：定义、注册、使用
import ListContainer from "./ListContainer";
import Recommend from "./Recommend";
import Rank from "./Rank";
import Like from "./Like";
import Brand from "./Brand";
import Floor from "./Floor";
import { mapState } from "vuex";
export default {
  name: "",
  data() {
    return {
      searchParams:{
        attrValue:'',
        keyword:'',
        order:'1:desc',
        pageNo:1,
        pageSize:10
      },
      searchList1:[]
    }
  },
  components: {
    ListContainer,
    Recommend,
    Rank,
    Like,
    Brand,
    // Floor,
  },
  mounted() {
    // this.$store.dispatch('getFloorList')
    this.$store.dispatch("getAricdeInfo",this.searchParams);
    this.$store.dispatch('getUserInfo');
    this.searchList1= this.searchList
  },
  methods: {
    check(){
      if (this.searchParams.pageNo<3) {
         this.searchParams.pageNo++
      }else{
        this.searchParams.pageNo=1
      }
      console.log(this.searchParams.pageNo);
      this.$store.dispatch("getAricdeInfo",this.searchParams);
    },

    goPay(item){
      console.log(item);
      sessionStorage.setItem('userArr',JSON.stringify(item))
      this.$router.push({
        path:`/detail/${item.id}`,
        query:{
          item
        }
      });
    }
  },
  computed:{
    ...mapState({
      floorList:state =>state.home.floorList,
      searchList:state =>state.search.searchList.goodsList
    })
 }
};
</script>

<style scoped lang="less">
.like {
  margin-top: 15px;

  .py-container {
    width: 1200px;
    margin: 0 auto;

    .title {
      overflow: hidden;

      .fl {
        float: left;
        font-size: 20px;
        line-height: 30px;
      }

      .fr {
        float: right;
        background-image: url(./images/icons.png);
        width: 66px;
        height: 25px;
        background-position: 182px -104px;
        line-height: 30px;
        font-size: 12px;
        font-weight: 400;
        color: #666;
        text-decoration: none;
      }
    }

    .bd {
      .favourate {
        border: 1px solid #e4e4e4;
        overflow: hidden;
        padding: 0 10px;
        box-sizing: border-box;
        display: flex;

        li {
          height: 250px;
          margin: 0 -1px;
          overflow: hidden;
          background: #fff;
          position: relative;
          width: 16.667%;
          display: flex;
          flex-direction: column;
          align-items: center;
          cursor: pointer;

          img {
            width: 142px;
            height: 142px;
            transition: all 400ms;

            &:hover {
              opacity: 0.8;
              transform: scale(1.1);
            }
          }

          .like-text {
            padding: 0;
            width: 142px;
            border-right: 1px solid #e4e4e4;

            p {
              margin: 5px 0;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2; //控制行数
              -webkit-box-orient: vertical;
            }

            h3 {
              color: #df3033;
              font-size: 20px;
              line-height: 30px;
              margin: 9px 0;
              font-weight: 700;
            }
          }
        }
      }
    }
  }
}
</style>
